<template>
  <view>
	<view id="g-goBack" @click="$utils.toBack()">
		<view class="cuIcon-back"></view>
	</view>
	<view class="title">{{type==0?'插座瞬时功率':'插座瞬时电流'}}</view>
	<canvas canvas-id="canvasxxx" id="canvasxxx" :style="{width: cWidth+'px',height :cHeight+'px'}" type="2d" class="charts" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"/>
  </view>
</template>

<script>
import uCharts from '@/js_sdk/u-charts/u-charts.js';
var uChartsInstance = {};
export default {
  data() {
    return {
		tradeNo:null,
		createDate:null,
		type:1,
		cWidth: 0,
		cHeight: 0,
		pixelRatio: 2,
		table:{},
    };
  },
  onLoad(option) {
	this.type = option.type;
	this.tradeNo = option.tradeNo;
	this.createDate = option.createDate;
	  
	const getWindowInfo = uni.getWindowInfo();
	const ch = getWindowInfo.screenWidth *1.6;
	const cw = getWindowInfo.screenHeight *1.6;
	  
	this.cWidth = uni.upx2px(ch);
	this.cHeight = uni.upx2px(cw);
	this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
	
  	const api = this.$request;
  	const self = this;
  	api.post(api.url.cdczOrderDetail,{
  		tradeNo:this.tradeNo,
		createDate:this.createDate
  	},(res)=>{
  		if(res.code==200){
  			const lineData = res.body.polygonalLineData;
  			if(!lineData || !lineData.categories || lineData.categories.length==0) return;
  			const dateStr = lineData.categories[lineData.categories.length-1].split(":");
  			if(parseInt(dateStr[1])+3>=60){
  				dateStr[0] = parseInt(dateStr[0]) + 1;
  				dateStr[1] = parseInt(dateStr[1]) -57;
  			}else{
  				dateStr[1] = parseInt(dateStr[1]) + 3;
  			}
  			//前后两段第一个点为0
  			lineData.categories.push(dateStr[0]+":"+dateStr[1])
  			lineData.series[0].data.push(0);
  			lineData.series[1].data.push(0);
  			lineData.series[0].data[0]=0;
  			lineData.series[1].data[0]=0;
  			console.log(lineData)
  			const table = {
  				categories : lineData.categories,
  				series : [{
  					name:lineData.series[option.type].name,
  					data:lineData.series[option.type].data
  				}]
  			};
			this.table = table;
			self.drawCharts('canvasxxx', table);
  		}
  	})
  },
  methods: {
	drawCharts(id,data){
	  const ctx = uni.createCanvasContext(id, this);
	  uChartsInstance[id] = new uCharts({
		type: "area",
		context: ctx,
		width: this.cWidth,
		height: this.cHeight,
		categories: data.categories,
		series: data.series,
		animation: true,
		timing: "easeOut",
		duration: 1000,
		rotate: true,
		rotateLock: false,
		background: "#FFFFFF",
		color: ["#FC8452"],
		fontSize: 13,
		fontColor: "#666666",
		dataLabel: false,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: true,
		enableMarkLine: false,
		legend: {
		  show: false,
		},
		xAxis: {
		  disableGrid: true,
		  disabled: false,
		  axisLine: true,
		  axisLineColor: "#CCCCCC",
		  calibration: false,
		  fontColor: "#666666",
		  fontSize: 13,
		  lineHeight: 20,
		  marginTop: 0,
		  rotateLabel: true,
		  rotateAngle: 60,
		  // labelCount:30,  //单屏幕限制显示的数量
		  itemCount: 35,  //单屏数据密
		  boundaryGap: "center",
		  splitNumber: 5,
		  gridColor: "#CCCCCC",
		  gridType: "solid",
		  dashLength: 4,
		  gridEval: 1,
		  scrollShow: true,
		  scrollAlign: "left",
		  scrollColor: "#A6A6A6",
		  scrollBackgroundColor: "#EFEBEF",
		  title: "",
		  titleFontSize: 13,
		  titleOffsetY: 0,
		  titleOffsetX: 0,
		  titleFontColor: "#666666",
		  formatter: "",
		},
		yAxis: {
		  gridType: "dash",
		  dashLength: 2,
		  disabled: false,
		  disableGrid: false,
		  splitNumber: 10,
		  gridColor: "#CCCCCC",
		  padding: 10,
		  showTitle: false,
		  data: [{
			  type:'value',
			  title:'瞬时功率'
		  }]
		},
		extra: {
		  area: {
			addLine: true,
			gradient: true,
		  },
		  tooltip: {
		  	showBox: true,
		  },
		  markLine: {
			type: "solid",
			dashLength: 4,
			data: []
		  }
		}
	  });
	},
	touchstart(e){
	  uChartsInstance[e.target.id].scrollStart(e);
	},
	touchmove(e){
	  uChartsInstance[e.target.id].scroll(e);
	},
	touchend(e){
	  uChartsInstance[e.target.id].scrollEnd(e);
	  uChartsInstance[e.target.id].showToolTip(e);
	}
  }
};
</script>

<style scoped>
	page{
		background-color: white;
	}
	#g-goBack{
		position: fixed;
		top: 20rpx;
		right: 0;
		width: 70rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		background:linear-gradient(#e85b36,#eca768);
		color: white;
		border-radius: 40rpx 0 0 40rpx;
		opacity: 0.9;
	}
	.title{
		position: absolute;
		top:50%;
		right: 0rpx;
		transform:translateY(-50%) translateX(68rpx)rotate(90deg);
		z-index: 200;
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title::before{
		content: '';
		display: block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
		background-color: #ea6d4b;
		box-shadow: 0 0 10rpx #ea6d4b;
	}
	.charts{
		background-color: white;
		position: absolute;
		top: 50%;
		left: 10rpx;
		transform: translate(0%,-50%);
		z-index: 100;
	}
</style>